<template>
    <el-menu default-active="1-3-1" @open="handleOpen" @close="handleClose" @select="handleSelect"
             :collapse="isCollapse">
        <el-checkbox-group v-model="isCollapse" style="text-align: center;  " size="medium">
            <el-checkbox-button :label="true" style="text-align: center; ">
                <i class="el-icon-view"></i>
            </el-checkbox-button>
        </el-checkbox-group>
        <template v-for="menu in menus">
            <el-submenu :index="menu.id" v-if="menu.children">
                <template slot="title">
                    <i :class="menu.icon"></i>
                    <span slot="title">{{menu.name}}</span>
                </template>
                <el-menu-item v-for="sub in menu.children" :index="sub.id+'@'+sub.link" :key="sub.id"
                              style="min-width: 100%;">
                    <template slot="title">
                        <i :class="sub.icon"></i>
                        <span slot="title">{{sub.name}}</span>
                    </template>
                </el-menu-item>
            </el-submenu>
            <el-menu-item :index="menu.id+'@'+menu.link" v-if="!menu.children">
                <i :class="menu.icon"></i>
                <span slot="title">{{menu.name}}</span>
            </el-menu-item>
        </template>
    </el-menu>
</template>
<style>
    .el-checkbox-button:first-child .el-checkbox-button__inner {
        border: 0px;
        border-bottom: 1px solid #dcdfe6;
        background-color: #fff;
        color: #dcdfe6;
        min-width: 158px;
    }

    .el-checkbox-button.is-checked .el-checkbox-button__inner {
        border-left: 0px solid #dcdfe6;
        border-bottom: 1px solid #dcdfe6;
        background-color: #fff;
        color: #409EFF;
        min-width: 28px;
    }
</style>
<script>
    export default {
        data() {
            return {
                isCollapse: false,
                menus: [{
                    'id': '1',
                    'name': '用户列表',
                    'icon': 'el-icon-setting',
                    'link': '/admin/user/page'
                }, {
                    'id': '2',
                    'name': '通道管理',
                    'icon': 'el-icon-setting',
                    'children': [{
                        'id': '2-1',
                        'name': '支付通道',
                        'icon': 'el-icon-setting',
                        'link': '/admin/pay/channel-page'
                    }, {
                        'id': '2-2',
                        'name': '邮件通道',
                        'icon': 'el-icon-setting',
                        'link': '/admin/pay/account-page'
                    }, {
                        'id': '2-3',
                        'name': '短信通道',
                        'icon': 'el-icon-setting',
                        'link': '/admin/pay/account-page'
                    }]
                }, {
                    'id': '3',
                    'name': '资金',
                    'icon': 'el-icon-setting',
                    'children': [{
                        'id': '3-1',
                        'name': '出金',
                        'icon': 'el-icon-setting',
                        'link': '/admin/money/page'
                    }, {
                        'id': '3-2',
                        'name': '入金',
                        'icon': 'el-icon-setting',
                        'link': '/admin/money/page'
                    }, {
                        'id': '3-3',
                        'name': '流水',
                        'icon': 'el-icon-setting',
                        'link': '/admin/water/page'
                    }]
                }, {
                    'id': '4',
                    'name': '模板',
                    'icon': 'el-icon-setting',
                    'link': '/admin/meta/page'
                }, {
                    'id': '5',
                    'name': '消息',
                    'icon': 'el-icon-setting',
                    'link': '/admin/message/page'
                }, {
                    'id': '6',
                    'name': '设置',
                    'icon': 'el-icon-setting',
                    'link': '/admin/variety/page',
                    'children': [{
                        'id': '6-1',
                        'name': '汇率',
                        'icon': 'el-icon-setting',
                        'link': '/admin/rate/page'
                    }, {
                        'id': '6-2',
                        'name': '标签',
                        'icon': 'el-icon-setting',
                        'link': '/admin/assets/tag-page'
                    }, {
                        'id': '6-3',
                        'name': '日志',
                        'icon': 'el-icon-setting',
                        'link': '/admin/log/page'
                    }]
                }]
            };
        },
        methods: {
            handleSelect(index, path) {
                console.log(index, path);
                this.$router.push(index.split('@')[1]);
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    };
</script>